<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="/vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{ name }}</h2>
        <h2>当前显示的n值: {{n}}</h2>
        <h2>
            通过自定义指令放大10倍的值:
            <span v-big='n'></span>
        </h2>
        <button @click="n++">点击n+1</button>
        <hr>
        <!-- 点击上面的按钮获取焦点 -->
        <input type="text" name="" id="" v-fbind:value="n">
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                n: 1,
                name: 'zzm'
            },
            directives: {
                // 接受两个参数，一个是dom元素，一个是对象
                // big函数何时调用: 1.指令与元素成功绑定时（也就是一上来）；2.指令所在的模版被重新解析
                big(element, binding) {
                    element.innerText = binding.value * 10;
                },

                fbind: {
                    // 指令与元素成功绑定时（也就是一上来）
                    bind(element, binding) {
                        element.value = binding.value
                        element.focus()
                        console.log('b');
                    },
                    // 指令所在的元素被插入到页面时
                    inserted(element, binding) {
                        element.focus();
                        console.log('i', element.parentElement);
                        element.parentElement.style.backgroundColor = 'skyblue' // 这个时候可以获取父元素，设置其背景颜色
                    },
                    // 指令所在的模版被重新解析
                    update(element, binding) {
                        element.value = binding.value
                        element.focus()
                        console.log('u');
                    }
                }
            }
        })
    </script>
    
</body>
</html>